// AppTabScreen.kt
package com.tencent.compose.sample

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.* // remember, mutableStateOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

/**
 * Compose implementation of AppTabPage (simplified).
 *
 * - AppHomeScreen is used for tab 0.
 * - Other tabs show AppEmptyScreen (with title).
 * - Icons are simple placeholder circles with the icon name as text.
 *
 * Replace placeholder image drawing with your own image loader (painterResource, AsyncImage, etc).
 */
/** Empty page shown for non-home tabs. */
@Composable
internal fun AppEmptyScreen(title: String) {
    Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
        Box(contentAlignment = Alignment.Center) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Text(text = title, fontSize = 24.sp, color = MaterialTheme.colorScheme.onBackground)
                Spacer(modifier = Modifier.height(6.dp))
                Text(text = "Placeholder content", color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.7f))
            }
        }
    }
}

@Composable
internal fun AppTabScreen(
    // titles for bottom tab bar
    titles: List<String> = listOf("Home", "Video", "Discover", "Message", "Me"),
    // icon names (strings) for placeholders; you can map to actual resource ids in real app
    icons: List<String> = listOf("home", "video", "discover", "msg", "me"),
    initialSelectedIndex: Int = 0,
    tabBarHeightDp: Int = 80,
    onTabSelected: ((index: Int) -> Unit)? = null
) {
    var selectedIndex by remember { mutableStateOf(initialSelectedIndex.coerceIn(0, titles.size - 1)) }

    // Simple theme colors (use MaterialTheme in real app)
    val bgColor = MaterialTheme.colorScheme.background
    val tabBackground = MaterialTheme.colorScheme.surface
    val textFocused = MaterialTheme.colorScheme.primary
    val textUnfocused = MaterialTheme.colorScheme.onSurfaceVariant

    Column(modifier = Modifier.fillMaxSize().background(bgColor)) {
        // status bar spacer (you can adjust or remove)
        Spacer(modifier = Modifier.height(0.dp))

        // Content area (page)
        Box(modifier = Modifier
            .weight(1f)
            .fillMaxSize()
        ) {
            when (selectedIndex) {
                0 -> AppHomePreview()
                else -> AppEmptyScreen(title = titles.getOrNull(selectedIndex) ?: "Page ${selectedIndex + 1}")
            }
        }

        // Bottom tab bar
        Row(
            modifier = Modifier
                .height(tabBarHeightDp.dp)
                .fillMaxSize()
                .background(tabBackground),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            val count = titles.size.coerceAtLeast(icons.size)
            for (i in 0 until count) {
                val title = titles.getOrNull(i) ?: "Tab $i"
                val iconName = icons.getOrNull(i) ?: title.lowercase()

                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center,
                    modifier = Modifier
                        .weight(1f)
                        .clickable {
                            selectedIndex = i
                            onTabSelected?.invoke(i)
                        }
                        .padding(vertical = 6.dp)
                ) {
                    // placeholder icon (circle with text). Replace with real Image painter in production.
                    PlaceholderIcon(
                        text = iconName,
                        isSelected = (i == selectedIndex),
                        sizeDp = 30
                    )
                    Spacer(modifier = Modifier.height(6.dp))
                    Text(
                        text = title,
                        fontSize = 12.sp,
                        color = if (i == selectedIndex) textFocused else textUnfocused,
                        textAlign = TextAlign.Center
                    )
                }
            }
        }
    }
}

@Composable
private fun PlaceholderIcon(text: String, isSelected: Boolean, sizeDp: Int = 30) {
    // if in preview or without resources, show simple circle with text
    val bg = if (isSelected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08f)
    val fg = if (isSelected) Color.White else MaterialTheme.colorScheme.onSurfaceVariant

    Box(
        modifier = Modifier
            .size(sizeDp.dp)
            .clip(CircleShape)
            .background(bg),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = text.take(2).uppercase(),
            color = fg,
            fontSize = 12.sp,
            textAlign = TextAlign.Center
        )
    }
}

/** A simple placeholder for the Home page. Replace with your real AppHomeScreen implementation. */
@Composable
internal fun AppHomeScreen() {
    // simple static content to represent home screen
    Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(20.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Text("App Home", fontSize = 28.sp, color = MaterialTheme.colorScheme.primary)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "This is the placeholder for the original AppHomePage.\nReplace with your real Compose content.",
                textAlign = TextAlign.Center,
                color = MaterialTheme.colorScheme.onBackground
            )
        }
    }
}

/** Preview (Android Studio) */
@Composable
internal fun PreviewAppTabScreen() {
    // When previewing, MaterialTheme may not be set, but it's okay.
    AppTabScreen()
}
